<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@include file="../common_head.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script type="text/javascript" src="${ctx}/js/lib.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.scrollLoading.js"></script>
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    <title>软装到家</title>
</head>
<body>
 <%@include file="../common_nav.jsp" %>
<!--banner-->
<div class="ogmall_slider">
    <div class="bd">
        <ul>
            <li><img src="${ctx}/img/banner_01.jpg" /></li>
        </ul>
    </div>
    <div class="ogmall_design_btn"><a href="${ctx }/design/online">在线设计</a></div>
</div>
<!--banner END-->

<div class="ogmall_lbrz_bg">
<div class="w-1200 margin-0-auto" id="ogmall_left">
    <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
    <div class="blank10"></div><div class="blank10"></div>
    <!--聚品牌-->
    <div class="ogmall_lbrz scrollLoading1">
        <div class="hd" id="top_hd">
    		<ul class="brandss" id="brandss">
            <li onclick="queryByStyle(0, this)"><a href="#" value="0" >全部</a></li>
				<c:forEach items="${houseStyles }" var="hs">
               <li onclick="queryByStyle(${hs.id}, this)"><a href="javascript:;" value="${hs.id }" >${hs.name }</a></li>
      			 </c:forEach>
			</ul>               
	 	</div>
        <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
        <div class="blank10"></div><div class="blank10"></div>
        <div class="ogmall_lbrz_title">
        	<h1>聚品牌</h1><h2>Brand</h2>
        </div>
        <div class="bd">
            <div>
                <ul class="barnd">
	                <c:forEach items="${brandStyleDTOs }" var="brandStyleDTO">
						<li><a  href="${ctx }/staybag/detail?brandID=${brandStyleDTO.brand.id}&styleID=${brandStyleDTO.styleID}" >
							<div class="img">
								<img data-original="${brandStyleDTO.brand.headImage }">
							</div>
							<div class="pb">
								<img data-original="${brandStyleDTO.brand.image }">
							</div>
							</a></li>
					</c:forEach>   
                 </ul>
                 <div class="w-100p bg-f5">
				   	 <!--分页-->
				 	 <%@include file="../page4staybag.jsp" %>
				</div>
                <div class="ogmall_lbrz_title">
                    <h1>相关方案</h1><h2>Related Scheme</h2>
            		<div class="ogmall_more"><a href="${ctx }/design/indexNew">更多</a></div>
                </div>
                <ul class="related">
                    <c:forEach items="${designDTOs }" var="dto">
            	<li>
            		<a href="${ctx }/design/detailNew?id=${dto.id}" target="_blank">
	            		<div class="img"><img class="scrollLoading" data-original="${dto.headImage}"></div>
	            	</a>
	            	 <a href="${ctx }/designer/detail?designerId=${dto.designer.id}" target="_blank">
	                <div class="b">
	                    <img src="${dto.user.headImage }">
	                    <span>${dto.user.realName }<em>${dto.community.city.name } ${dto.community.district.name }  ${dto.area }㎡</em></span>
	                </div>
	                </a>
                </li>
            </c:forEach>
                </ul>
            </div>
        </div>
    </div>
    <!--聚品牌 END-->
    
   
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
</div>  
<div class="w-100p bg-f5">
    <!--分页-->
  <%@include file="../page4staybagDesign.jsp" %>
</div>
<%@include file="../foot.jsp" %>
<%@include file="../left_nav.jsp" %>

<script type="text/javascript" src="${ctx}/js/plugins.js"></script>
<script type="text/javascript" src="${ctx}/js/modules.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript">
	jQuery(".ogmall_lbrz").slide({triggerEvent:true,trigger:"click"});
	$(function(){
		var scrollDir = 'down',lastScrollTop = $(window).scrollTop();
		var viewHeight = $(window).height(); //获取视窗高度
		$(window).scroll(function(event){
			viewHeight = $(window).height();
			var ling = $(window).scrollTop();
			var ct = ling - lastScrollTop;
			if(ling > ($('#ogmall_left').offset().top-viewHeight)){
				$('#ogmall_left_nav').show();
				$('#ogmall_left_nav').removeClass('ogmall_left_nav');
				
				if($('#ogmall_left').offset().top>ling){
					var top = $('#ogmall_left').offset().top-ling+20;
					if(top <20){
						top =20;
					}
					$('#ogmall_left_nav').css({top:top+'px'})
				}else{
					$('#ogmall_left_nav').css({top:20+'px'})
				}
				
			}else{
				$('#ogmall_left_nav').hide();
				$('#ogmall_left_nav').addClass('ogmall_left_nav');
				fixed = false;
			}
			lastScrollTop = ling;
			
			if(ling > ($('#ogmall_left').offset().top-viewHeight)){
				$('#top_hd').show();
				if($('#ogmall_left').offset().top>ling){
					var top = $('#ogmall_left').offset().top-ling+60;
					if(top <20){
						top =20;
					}
					$('#top_hd').css({top:top+'px'})
				}else{
					$('#top_hd').css({top:0+'px'})
				}
				
			}else{
				$('#top_hd').hide();
				fixed = false;
			}
			lastScrollTop = ling;
		})
	});	
	$(function(){
		var a =$("#ogmall_left_nav li:gt(0)");
			a.hide();
		$(".f0").click(function(){
			if(a.is(':visible')){
				 a.slideUp('fast');
				 $(this).removeClass('f1');
			}else{
				a.slideDown('fast').show();	
				$(this).addClass('f1');
			}			
		});
	});
	
	function queryByStyle(index, self) {
	$("ul.brandss li").each(function(){
		$(this).removeClass("on");
	});
	
	$(self).addClass("on");
	
	var pageNum = $("#page").val();
	var styleID = $(self).children('a').attr("value");
	if (styleID == "undefined" || styleID == "") {
		styleID = 0;
	}
	
	gotoPage(pageNum, styleID)
	
}


function gotoPage(pageNum, styleID) {   //跳转到指定页面
	location="${ctx}/staybag/index?page=" + pageNum + "&styleID=" + styleID;
}

function gotoDesignPage(pageNum, styleID) {   //跳转到指定页面
	location="${ctx}/staybag/index?pageNum=" + pageNum + "&styleID=" + styleID;
}
function setBrands(){
	var id='${brandStyleDTO.styleID}';
	if(id!=""&&id!=null){
		$("ul.brandss li a").each(function(){
		$(this).parent().removeClass("on");
		if($(this).attr("value")==id){
			$(this).parent().addClass("on");
		}
	});
	}
}
function jump(){
	var styleID=getUrlParam('styleID');
	if(styleID!=null&&styleID!=""){
		$("html, body").animate({
	      	scrollTop: "900px"
	    	}, {
	      duration: 800,
	      easing: "swing"
	    });
	}
	
}
  $(document).ready(function () {
       setBrands();
       setNav(5);
	   jump();
    })
   
    //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
</script>
</body>
</html>